<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>♦♥♣♠ Wheel ♥f F♥rtune ♪♫♪ ♥ Team 4 ♦♥♣♠</title>
        
        <script src="lib/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/createjs.min.js" type="text/javascript" charset="utf-8"></script>
        <!--script src="lib/easeljs/events/EventDispatcher.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/preloadjs/AbstractLoader.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/preloadjs/LoadQueue.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/preloadjs/TagLoader.js" type="text/javascript" charset="utf-8"></script>
        <script src="lib/preloadjs/XHRLoader.js" type="text/javascript" charset="utf-8"></script-->

		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>

    </head>
    <body onload="init()">
    	<div id="background_main">
			<section id="loading" class="loading">
				<div id="process" class="process">
					<span id="number">Loading... 0%
					</span>
				</div>
			</section>
			<canvas id="main_game">
			</canvas>
		</div>
         <script type="text/javascript">
	        var preload;
	        var manifest; // List File will Download to Client
	        var stage;
	        var theRing;
	        var arrow;
	        var bg_wheel;
	        var wheel;
	        function init() {
	        	reload();
	            loadAll();
	        }
	        // Reset everything
	        function reload() {
	            // If there is an open preload queue, close it.
	            if (preload != null) { preload.close(); }
	            // Push each item into our manifest
	            manifest = [
	                "images/background1.jpg",
					"images/background2.jpg",
					"images/background3.jpg",
					"images/background4.jpg",
					"images/background5.jpg",
					"images/background6.jpg",
					"images/background7.jpg",
					"images/background8.jpg",
					"images/background9.jpg",
					"images/background10.jpg",
					"images/background11.jpg",
					"images/background12.jpg",
					"images/background13.jpg",
					"images/background14.jpg",
					"images/background15.jpg",
					"images/bg_large.jpg",
					"images/frame.png",
					"images/arrow.png",
					"images/wheel.png",
					"images/center.png",
	            ];
	            
	            // Create a preloader. There is no manifest added to it up-front, we will add items on-demand.
	            preload = new createjs.LoadQueue();
	            preload.addEventListener("fileload", handleFileLoad);
	            preload.addEventListener("progress", handleOverallProgress);
	            preload.addEventListener("fileprogress", handleFileProgress);
	            preload.addEventListener("error", handleFileError);
	            preload.setMaxConnections(10);
	        }
	        function stop() {
	            if (preload != null) { preload.close(); }
	        }
	        function loadAll() {
	            while (manifest.length > 0) {
	                // Get the next manifest item, and load it
		            var item = manifest.shift();
		            preload.loadFile(item);
	            }
	        }
	        var itemDownloaded = 0;
	        // File complete handler
	        function handleFileLoad(event) {
	        }
	        // File progress handler
	        function handleFileProgress(event) {
	            //var div = map[event.item.src]; // Lookup the related item
	            //div.children("DIV").width(event.progress*div.width()); // Set the width the progress.
	        }
	        // Overall progress handler
	        function handleOverallProgress(event) {
	        	var u = Math.round(preload.progress * 100);
				$("#number").text("Loading... "+ u +"%");
	            $("#process").width(preload.progress * $("#loading").width());
	            //Load all done.
	            if(preload.progress == 1){
	            	stop();
	            	
	            	setTimeout(function(){
	            		$("#loading").hide();
	            		$("#background_main").addClass("background_main");	
	            		
	            		stage = new createjs.Stage("main_game");
	            		createjs.Ticker.addListener(this);
        				stage.canvas.width = 1200;
        				stage.canvas.height = window.innerHeight;
        				
        				wheel = new createjs.Bitmap("images/wheel.png");
					    wheel.y = 310;
					    wheel.x = 310;
					    wheel.regX = 494 >> 1;
            			wheel.regY = 494 >> 1;
					    stage.addChild(wheel);
        				
        				/*
	            		bg_wheel = new createjs.Bitmap("images/center_shadow.png");
					    bg_wheel.y = 67;
					    bg_wheel.x = 67;
					    stage.addChild(bg_wheel);
					    */
					    center = new createjs.Bitmap("images/center.png");
					    center.y = 260;
					    center.x = 260;
					    stage.addChild(center);
        				
	            		theRing = new createjs.Bitmap("images/frame.png");
					    theRing.y = 10;
					    theRing.x = 10;
					    stage.addChild(theRing);
					    
					    arrow = new createjs.Bitmap("images/arrow.png");
					    arrow.y = 34;
					    arrow.x = 442;
					    arrow.rotation = 45;
					    
					    wheel.onClick = function(){
					    	console.log("click");
					    	createjs.Ticker.addEventListener("tick", transformArrow);
					    	i=0;
					    	angle = 1;
					    };
					    stage.addChild(arrow);
					    


	            		
	            		
	            		
	            	},500);
	            }
	        }
	        
	         function stopTransformArrow() {
				createjs.Ticker.removeEventListener("tick", transformArrow);
	        }
			var angle = 0;
			var i = 0;
	        function transformArrow() {
	            i++;
	            //angle += 0.025;
	            angle -= 0.15;
	            //var value = (Math.sin(angle) * 360);
				var value = (angle * 360);
				
				value = Math.floor(value);
	            wheel.setTransform (wheel.x , wheel.y , 1 , 1 , value , 0 , 0 , wheel.regX , wheel.regY );
	            //wheel.scaleX = wheel.scaleY = ((value)/360) + 0.25;
	            stage.update();
	            
	            setTimeout(function(){
	            	stopTransformArrow();
	            },2000);
	            
	        }
	        
	        function tick() {
		        stage.update();
		    }
	        // An error happened on a file
	        function handleFileError(event) {
	            //div.addClass("error");
	        }
	    </script>
    </body>
</html>
